<!--弱项分析-->
<script setup lang="ts">

import IndexSmallTitle from "./common/IndexSmallTitle.vue";
import GroupButtons from "./common/GroupButtons.vue";
import {onMounted, ref} from "vue";
import {useRoute,useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();

let buttons = ref([
  {label: '西安局', selected: true},
  {label: '延安车务段', selected: false},
  {label: '榆林站', selected: false},
]);

const tableData = [
  {
    date: '规章制度一',
    name: '第32条',
    address: '99次',
  },
  {
    date: '规章制度二',
    name: '第999条',
    address: '99次',
  },
  {
    date: '规章制度三',
    name: '第999条',
    address: '999次',
  },
  {
    date: '规章制度四',
    name: '第999条',
    address: '0次',
  },
]

function clickHander(selectedIndex:number,upRote:boolean){
  buttons.value.forEach((e,index)=>{
    e.selected = false;
    if(index===selectedIndex){
      e.selected = true;
    }
  })
  if(upRote){
    updateRoute(selectedIndex);
  }
}

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      weaknessAnalysis: index,
    },
  });
};

onMounted(()=>{
  const weaknessAnalysis = Array.isArray(route.query.weaknessAnalysis)
      ? route.query.weaknessAnalysis[0]
      : route.query.weaknessAnalysis;
  console.log(weaknessAnalysis, 'weaknessAnalysis');
  // 解析为整数
  const index = parseInt(weaknessAnalysis, 10);
  // 检查是否为有效数字
  if (!isNaN(index)) {
    clickHander(index,false);
  } else {
    console.error('Invalid leftMenuIndex:', weaknessAnalysis);
  }
});

</script>

<template>
  <div class="mainStyle">
    <IndexSmallTitle title="弱项分析"></IndexSmallTitle>
    <GroupButtons :buttons="buttons" @ccc="clickHander" :width="269" style="margin-top: 15px"></GroupButtons>
      <el-table :data="tableData"  style="width: 100%;margin-top: 15px" class="custom-table">
        <el-table-column prop="date" label="规章" width="100" align="center"/>
        <el-table-column prop="name" label="条目" width="80" align="center"/>
        <el-table-column prop="address" label="错题次数" align="center"/>
      </el-table>
  </div>
</template>

<style scoped>
.el-table{
  --el-table-header-bg-color:#EEF8FE;
  --el-table-header-text-color:#000000;
  --el-table-border-color:#909399;
}
.custom-table {
  border: 1px solid #CCCCCC; /* 灰色边框 */
}
.mainStyle{
  background: #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>